<template>
  <div style="height: 100%">
    <div ref="map" style="height: 100%"></div>
    <div class="input-card" style="width: 120px">
      <button class="btn" @click="polyEditor.open()" style="margin-bottom: 5px">
        开始编辑
      </button>
      <button class="btn" @click="polyEditor.close()">结束编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      polygon: null,
      polyEditor: null,
      deliveryRange: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      let res = await this.$H.get(`/1.1/classes/map`);
      const { deliveryRange, objectId, center } = res.data.results[0];
      this.map = new AMap.Map(this.$refs.map, {
        center: [center.split(",")[0], center.split(",")[1]],
        zoom: 12,
        viewMode: "3D",
      });
      this.initPolygon(deliveryRange);
      this.initEditor(objectId);
    },
    initPolygon(deliveryRange) {
      this.polygon = new AMap.Polygon({
        path: deliveryRange,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        zIndex: 50,
        bubble: true,
      });
      this.map.add([this.polygon]);

      // 缩放地图到合适的视野级别
      this.map.setFitView();
    },
    initEditor(objectId) {
      const options = {
        drawPolyline: false,
        drawCircle: false,
        drawRectangle: false,
        editPolygon: true,
        editCircle: false,
        editRectangle: false,
        removeShape: false,
      };
      this.polyEditor = new AMap.PolyEditor(this.map, this.polygon, options);
      this.polyEditor.on("end", () => {
        this.deliveryRange = this.polygon
          .getPath()
          .map((point) => [point.lng, point.lat]);
        this.$H.put(`/1.1/classes/map/${objectId}`, {
          deliveryRange: this.deliveryRange,
        });
        console.log("this.deliveryRange", this.deliveryRange);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 50%);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  border-color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  cursor: pointer;

  &:hover {
    background-color: #25a5f7;
    color: #fff;
  }
}
</style>
